<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-row >
        <el-col :span="8">
          <el-form-item label="供应商编号" prop="vendorCode">
            <el-input v-model="formData.vendorCode" placeholder="请输入供应商编号"  readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商名称" prop="vendorName">
            <el-input v-model="formData.vendorName" placeholder="请输入供应商名称" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购订单号" prop="displayPoNumber">
            <el-input v-model="formData.displayPoNumber" placeholder="请输入采购订单号" readonly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="8">
          <el-form-item label="订单总金额" prop="sumAmount">
            <el-input v-model="formData.sumAmount" placeholder="请输入订单总金额" readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="币种" prop="currencyCode">
            <el-input v-model="formData.currencyCode" placeholder="请输入币种"  readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="采购员" prop="agentName">
            <el-input v-model="formData.agentName" placeholder="请输入采购员" readonly   />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="8">
          <el-form-item label="发布日期" prop="releaseDate">
            <el-date-picker
              v-model="formData.releaseDate"
              type="date"
              value-format="x"
              placeholder="选择发布日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单类型" prop="typeLookupDesc">
            <el-input v-model="formData.typeLookupDesc" placeholder="请输入订单类型" readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料号" prop="itemCode">
            <el-input v-model="formData.itemCode" placeholder="请输入物料号"  readonly  />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="8">
          <el-form-item label="物料名称" prop="itemDescription">
            <el-input v-model="formData.itemDescription" placeholder="请输入物料名称" readonly   />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="大小量纲" prop="sizeDimension">
            <el-input v-model="formData.sizeDimension" placeholder="请输入大小量纲"  readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="材质规格" prop="materialSpec">
            <el-input v-model="formData.materialSpec" placeholder="请输入材质规格"  readonly  />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="8">
          <el-form-item label="数量" prop="quantity">
            <el-input v-model="formData.quantity" placeholder="请输入数量"  readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位" prop="unitMeasLookupCode">
            <el-input v-model="formData.unitMeasLookupCode" placeholder="请输入单位"  readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单价" prop="unitPrice">
            <el-input v-model="formData.unitPrice" placeholder="请输入单价"  readonly  />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row >
        <el-col :span="8">
          <el-form-item label="每" prop="eachNumber">
            <el-input v-model="formData.eachNumber" placeholder="请输入每"  readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目代码" prop="projectCode">
            <el-input v-model="formData.projectCode" placeholder="请输入项目代码"  readonly  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="formData.projectName" placeholder="请输入项目名称"  readonly  />
          </el-form-item>
        </el-col>
      </el-row>


<!--      <el-row >-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="状态" prop="statusDesc">-->
<!--            <el-input v-model="formData.statusDesc" placeholder="请输入状态" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->

<!--          <el-form-item label="订单行id" prop="purLineId">-->
<!--            <el-input v-model="formData.purLineId" placeholder="请输入采购订单行id" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->

<!--          <el-form-item label="交货累计数量" prop="jhljsl">-->
<!--            <el-input v-model="formData.jhljsl" placeholder="请输入交货累计数量" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row >-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="发票（含税）" prop="fpljje">-->
<!--            <el-input v-model="formData.fpljje" placeholder="请输入发票累计金额（含税）" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="中标编号" prop="zbtzsbh">-->
<!--            <el-input v-model="formData.zbtzsbh" placeholder="请输入中标通知书编号" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="直送/异地" prop="zsydbs">-->
<!--            <el-input v-model="formData.zsydbs" placeholder="请输入直送标记/异地标识" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->

<!--      <el-row >-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="直送库位" prop="zskuwei">-->
<!--            <el-input v-model="formData.zskuwei" placeholder="请输入直送库位" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="直送库位" prop="zskuwei">-->
<!--            <el-input v-model="formData.zskuwei" placeholder="请输入直送库位" />-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--      </el-row>-->
      <el-divider content-position="left">更新库存</el-divider>
      <el-row >
        <el-col :span="8">
          <el-form-item label="库存数量" prop="stockNumber">
            <el-input v-model="formData.stockNumber" placeholder="请输入库存数量" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="质量状态" prop="qualityStatus">
            <el-input v-model="formData.qualityStatus" placeholder="请输入质量状态" />
<!--            <el-radio-group v-model="formData.qualityStatus">-->
<!--              <el-radio value="1">请选择字典生成</el-radio>-->
<!--            </el-radio-group>-->
          </el-form-item>
        </el-col>
        <el-col :span="8">

          <el-form-item label="生产日期" prop="produceDate">
            <el-date-picker
              v-model="formData.produceDate"
              type="date"
              value-format="x"
              placeholder="选择生产日期"
            />
          </el-form-item>
        </el-col>

      </el-row>


      <el-row >
        <el-col :span="8">

          <el-form-item label="序列号" prop="serialNo">
            <el-input v-model="formData.serialNo" placeholder="请输入序列号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="批次" prop="batchNumber">
            <el-input v-model="formData.batchNumber" placeholder="请输入批次" />
          </el-form-item>
        </el-col>
        <el-col :span="8">

          <el-form-item label="有效期" prop="periodOfValidity">
            <el-input v-model="formData.periodOfValidity" placeholder="请输入有效期" />
          </el-form-item>
        </el-col>

      </el-row>


<!--      <el-row >-->
<!--        <el-col :span="8">-->

<!--        </el-col>-->
<!--        <el-col :span="8">-->

<!--        </el-col>-->
<!--        <el-col :span="8">-->

<!--        </el-col>-->
<!--      </el-row>-->






    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { PurOrderApi, PurOrderVO } from '@/api/ck/purorder'

/** 长客订单 表单 */
defineOptions({ name: 'PurOrderForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  vendorCode: undefined,
  vendorName: undefined,
  displayPoNumber: undefined,
  sumAmount: undefined,
  currencyCode: undefined,
  agentName: undefined,
  releaseDate: undefined,
  typeLookupDesc: undefined,
  itemCode: undefined,
  itemDescription: undefined,
  sizeDimension: undefined,
  materialSpec: undefined,
  quantity: undefined,
  unitMeasLookupCode: undefined,
  unitPrice: undefined,
  eachNumber: undefined,
  projectCode: undefined,
  projectName: undefined,
  statusDesc: undefined,
  purLineId: undefined,
  jhljsl: undefined,
  fpljje: undefined,
  zbtzsbh: undefined,
  zsydbs: undefined,
  zskuwei: undefined,
  lineNum: undefined,
  stockNumber: undefined,
  qualityStatus: undefined,
  produceDate: undefined,
  serialNo: undefined,
  batchNumber: undefined,
  periodOfValidity: undefined,
})
const formRules = reactive({
  stockNumber: [{ required: true, message: '库存数量不能为空', trigger: 'change' }],
  qualityStatus: [{ required: true, message: '质量状态不能为空', trigger: 'change' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await PurOrderApi.getPurOrder(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as PurOrderVO
    if (formType.value === 'create') {
      await PurOrderApi.createPurOrder(data)
      message.success(t('common.createSuccess'))
    } else {
      await PurOrderApi.updatePurOrder(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    vendorCode: undefined,
    vendorName: undefined,
    displayPoNumber: undefined,
    sumAmount: undefined,
    currencyCode: undefined,
    agentName: undefined,
    releaseDate: undefined,
    typeLookupDesc: undefined,
    itemCode: undefined,
    itemDescription: undefined,
    sizeDimension: undefined,
    materialSpec: undefined,
    quantity: undefined,
    unitMeasLookupCode: undefined,
    unitPrice: undefined,
    eachNumber: undefined,
    projectCode: undefined,
    projectName: undefined,
    statusDesc: undefined,
    purLineId: undefined,
    jhljsl: undefined,
    fpljje: undefined,
    zbtzsbh: undefined,
    zsydbs: undefined,
    zskuwei: undefined,
    lineNum: undefined,
    stockNumber: undefined,
    qualityStatus: undefined,
    produceDate: undefined,
    serialNo: undefined,
    batchNumber: undefined,
    periodOfValidity: undefined,
  }
  formRef.value?.resetFields()
}
</script>
